<template>
  <div>
    <div class="info-title-box">
      <div class="tip"></div>
      <div class="operation">
        <div class="info-text">{{ title }}</div>
        <div class="add-icon" v-if="isAdd">
          <router-link :to="`Information/${whereIs}`">
            <img src="./../image/u256.png">
          </router-link>
        </div>
        <span class="mode-status">{{cModStauts|modeStatus}}</span>
        <div class="icon" :class="[!isShow?'rotate':'rotate-go']" @click="changeIsShow">
          <img src="./../image/u50.png" alt="">
        </div>
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div v-show="isShow">
        <slot/>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'folding',
  props: {
    title: {
      type: String,
      default: ''
    },
    isAdd: {
      type: Boolean,
      default: true
    },
    whereIs: {
      type: String,
      default: ''
    },
    cModStauts: {
      type: String
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    changeIsShow() {
      this.isShow = !this.isShow
      this.$emit('feedback', this.title)
    }
  },
  filters: {
    modeStatus(val) {
      if (val == 'C') {
        return '新增'
      } else if (val == 'U') {
        return '修改'
      } else if (val == 'D') {
        return '删除'
      } else {
        return ''
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}

.rotate {
  transition: all 0.3s;
  transform: rotate(180deg);
}

.rotate-go {
  transition: all 0.3s;
  transform: rotate(0deg);
}

.info-title-box {
  display: flex;
  margin-bottom: 10px;
  padding: 3px;
  .tip {
    background-color: #1caafe;
    width: 6px;
    height: 18px;
  }
  .operation {
    border-bottom: 1px #ccc solid;
    margin-left: 15px;
    display: flex;
    width: 100%;
    .info-text {
      flex: 5;
      text-align: left;
      margin-left: 5px;
      padding: 3px;
      color: black;
    }
    .add-icon {
      flex: 1;
      img {
        width: 18px;
      }
    }
    .icon {
      flex: 1;
      img {
        width: 18px;
      }
    }
  }
  .mode-status {
    color: #e91010;
    font-size: 13px;
  }
}
</style>
